import CodeView from '../../../shared/components/CodeView';
import { getDisplayElementById } from '../../shared/helpers';
import StylingHooksTable from '../../../shared/components/StylingHooksTable';
import * as Base from './base/example';
import * as Initials from './initials/example';

<div className="doc lead">
  An avatar component represents an object or entity
</div>

<CodeView exampleOnly>{getDisplayElementById(Base.default)}</CodeView>

## About Avatar

An avatar can be circular or a rounded rectangle, depending on usage. The default is a rounded rectangle and requires `.slds-avatar` as the base class.

### Examples

#### Profile Icon

<CodeView>{getDisplayElementById(Base.examples, 'profile-icon')}</CodeView>

#### Group Icon

<CodeView>{getDisplayElementById(Base.examples, 'group-icon')}</CodeView>

#### Fallback User Icon

<CodeView>
  {getDisplayElementById(Base.examples, 'fallback-user-icon')}
</CodeView>

#### Fallback Entity Icon

<CodeView>
  {getDisplayElementById(Base.examples, 'fallback-entity-icon')}
</CodeView>

#### Fallback User Initials

<CodeView>
  {getDisplayElementById(Base.examples, 'fallback-user-initials')}
</CodeView>

#### Fallback Entity Initials

<CodeView>
  {getDisplayElementById(Base.examples, 'fallback-entity-initials')}
</CodeView>

#### Fallback User Inverse

<CodeView>
  {getDisplayElementById(Base.examples, 'fallback-user-initials-inverse')}
</CodeView>

#### Linked Avatar

<CodeView>{getDisplayElementById(Base.examples, 'linked-avatar')}</CodeView>

## Initials

If an image is unavailable, up to two letters can be used instead. If the record name contains two words, like first and last name, use the first capitalized letter of each. For records that only have a single word name, use the first two letters of that word using one capital and one lower case letter. If either an image or initials are unavailable, use the object icon as a fallback.

<CodeView>{getDisplayElementById(Initials.default)}</CodeView>

### Examples

#### Linked Avatar

<CodeView>
  {getDisplayElementById(Initials.examples, 'linked-avatar-initials')}
</CodeView>

## Layout

### Circle

Use a circle for all people-oriented objects that could potentially render as avatars. For a fully round avatar, add the `.slds-avatar_circle` class. Four additional classes are available for sizing.

<CodeView>{getDisplayElementById(Base.examples, 'circle')}</CodeView>

## Sizes

### X-Small

<CodeView toggleCode={false}>
  {getDisplayElementById(Base.examples, 'x-small-image')}
</CodeView>

### Small

<CodeView toggleCode={false}>
  {getDisplayElementById(Base.examples, 'small-image')}
</CodeView>

### Medium

<CodeView toggleCode={false}>
  {getDisplayElementById(Base.examples, 'medium-image')}
</CodeView>

### Large

<CodeView toggleCode={false}>
  {getDisplayElementById(Base.examples, 'large-image')}
</CodeView>

## Styling Hooks Overview

<StylingHooksTable name="avatar" type="component" />
